<template>


    <div class="reg">
        

        <!--与constuserinfo双向绑定 大对象model UserInfo -->
      <el-form ref="ruleFormRef" :model="UserInfo"  label-width="120px" >
        <el-form-item label="用户名" >
          <el-input v-model="UserInfo.username"  />
        </el-form-item>
        <el-form-item label="邮箱" >
          <el-input v-model="UserInfo.email" />
        </el-form-item>
        <el-form-item label="密码" >
          <el-input v-model="UserInfo.password" type="password"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="register">注册</el-button>
        </el-form-item>
        <el-form-item>
        <router-link to="/login">已有账号？去登录</router-link>
      </el-form-item>
      </el-form>
    </div>
  
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import axios from "@/utils/request"
import {User, User_Info} from '@/types'
import { useUserStore } from '@/store/user'
import router from '@/router'
import {set} from "@/utils/storage"

const useStore = useUserStore()
const {setUser} = useStore
// useStore有两个对象，把其中一个方法提取出来，就可调
const UserInfo = ref<User>({
  "username": "",
    "email": "",
    "password": ""
})


const userinfo_rsp = ref<User_Info>({
  "id": 0, 
"email": "", 
"username": "",
 "bio": '',
  "image": "",
  "token":"" 
})


// 可以看出post数据类型
const register = function () {
  axios.post('/users',{
  "user":UserInfo.value
}).then(res=>{
  userinfo_rsp.value = res.data.user
// 调setUser
  setUser(userinfo_rsp.value)
  // token存入key中
  set('user_token',userinfo_rsp.value.token)
  router.push({name:'home'})
  console.log(res.data)
})
}

  </script>
  
  <style scoped>
  
  .reg {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 100%;
  }
  </style>